<template>
  <div class="part1Door">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="快捷入口" name="first"></el-tab-pane>
    </el-tabs>
    <div class="doorBox">
      <doorItem class="doorItem" v-for="(item,index) in shipList" :item="item" :key="index"></doorItem>
    </div>
  </div>
</template>

<script>
import doorItem from "@/views/Home/module/doorItem";
export default {
  name: "part1Door",
  components:{
    doorItem
  },
  data() {
    return {
      activeName: 'first',
      shipList:[
        {
          name:'卸船直提',
          url:'jUnloadLift',
          query:'XCZT_G',
          icon:'icon-matou4'
        },
        {
          name:'卸船入库',
          url:'jUnloadIn',
          query:'XCRK_G',
          icon:'icon-a-xiechuan2-fuben'
        }, {
          name:'装船直装',
          url:'jLoadLift',
          query:'ZCZZ_G',
          icon:'icon-matou2'
        },{
          name:'装船出库',
          url:'jLoadIn',
          query:'ZCCK_G',
          icon:'icon-SH-zhuangxiangguanli'
        },
        {
          name:'提重返空',
          url:'heavyEmpty',
          query:'CONTAINER',
          icon:'icon-shiliangzhinengduixiang31'
        },{
          name:'进空箱',
          url:'emptyBox',
          query:'CONTAINER',
          icon:'icon-database'
        },{
          name:'进重箱',
          url:'heavyBox',
          query:'CONTAINER',
          icon:'icon-shiliangzhinengduixiang'
        },{
          name:'提重箱',
          url:'heayBoxNum',
          query:'CONTAINER',
          icon:'icon-a-162_jizhuangxiangzhuanyongmatouxiangmuhezhunanguojiapizhundexiangguanguihuahezhun'
        },
      ]
    };
  },
  methods: {
    handleClick(tab, event) {

    }
  }
}
</script>

<style scoped lang="scss">
.part1Door{
  width: 410px;
  .doorBox{
    display: flex;
   justify-content: space-between;
    flex-wrap: wrap;
    .doorItem{
      margin-right: 5px;
      &:first-child{
       margin-bottom: 20px;
     }
    }
  }

}
</style>